<template>
    <div>
        <div>
            <h3 style="margin-left:20px">产品发布</h3>
        </div>
        <el-form style="width:50%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="version">
                <el-input class="taskAdd-row-title" placeholder="请输入内容" size="medium" v-model="ruleForm.version" clearable></el-input>
            </el-form-item>
            <el-form-item label='描述'>
                <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.content"></el-input>
            </el-form-item>
            <!-- <el-form-item label="关联表单">
                <el-select style="width:100%" v-model="manageName" filterable :filter-method="remoteMethodManage" clearable placeholder="请选择流程" value-key="formKey" @change="manageClick">
                    <el-option v-for="item in manage" :key="item.formKey" :label="item.formName" :value="item">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="是否审批">
                <el-switch v-model="switchType" @change="switchClick" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item label="流程表单" v-if="switchType == true">
                <el-select style="width:100%" v-model="processName" filterable :filter-method="remoteMethodProcess" clearable placeholder="请选择流程表单" value-key="id" @change="processClick">
                    <el-option v-for="item in process" :key="item.id" :label="item.name" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <parser v-if="formData" :form-conf="formData" ref="parser" @submit="submit" />
            <el-form-item label="附件" prop="docFilePath">
                <div style="display: flex;flex-direction: column;" @click.stop="">
                    <span v-for="item in ruleForm.docFilePath" v-if="ruleForm.docFilePath.length > 0" style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{ item.fileName }}</span>
                </div>
                <singlefileUpload ref="upload" style="width: 100px" :ruleFormdocFilePath='ruleForm.docFilePath' @uploadListDel="uploadListDel" @uploadSave="uploadSave" @returnUrl="returnUrl" @uploadListShow="uploadListShow">
                    <template v-slot:openDialog>
                        <!-- <div style="display: flex;flex-direction: column;">
                            <span v-for="item in ruleForm.docFilePath" v-if="ruleForm.docFilePath.length > 0" style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{item.fileName}}</span>
                        </div> -->
                            <el-button plain style="width: 100px">上传附件</el-button>
                    </template>
                </singlefileUpload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">保存</el-button>
                <el-button type="primary" v-if="switchType == true" @click="submitFormsave">保存并审批</el-button>
                <el-button @click="resetForm">取消</el-button>
            </el-form-item>
        </el-form>
        <!-- <uploadList style="z-index: 99999;" v-if="uploadForm.length > 0 && uploadListType == true" :uploadForm="uploadForm" @uploadListDel="uploadListDel"></uploadList> -->
    </div>
</template>
<script>
import Parser from "@/components/FormGenerator/components/parser";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import singlefileUpload from "@/components/upload/singlefileUpload";
import { save, processStart } from "@/api/prodVer";
import uploadList from "@/components/upload/uploadList.vue";
export default {
    name: "produceRelease",
    components: {
        Parser,
        singlefileUpload,
        uploadList,
    },
    data() {
        return {
            verId: "",
            buttomtype: false,
            uploadForm: [],
            uploadListType: false,
            formData: "", //表单数据
            switchType: true,
            manageName: "", //表单名称
            manage: [],
            processName: "", //流程名称
            process: [],
            ruleForm: {
                version: "",
                content: "",
                status: "00",
                formKey: "",
                modelId: "",
                formData: "",
                prodId: "",
                docFilePath: [],
                docType: "09",
                dirId: "",
            },
            rules: {
                version: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur",
                    },
                ],
                masterUserId: [
                    {
                        required: true,
                        message: "请选择负责人",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.ruleForm.prodId = this.$route.query.prodId;
        this.ruleForm.dirId = this.$route.query.dirId;
        this.processList();
        this.manageList();
    },
    methods: {
        submitFormsave() {
            this.buttomtype = true;
            if (this.formData) {
                this.$refs.parser.submitForm();
            } else {
                this.$message.error("请选择关联表单");
            }
        },

        uploadListDel(data) {
            this.uploadForm.splice(data, 1);
        },
        uploadListShow(data) {
            this.uploadForm = this.ruleForm.docFilePath;
            this.uploadListType = data;
        },
        returnUrl(data) {
            var docFilePath = {
                fileName: data.name,
                fileUrl: data.url,
            };
            this.uploadForm.push(docFilePath);
        },
        //上传附件（确定按钮）
        uploadSave(val) {
            let _this = this;
            _this.ruleForm.docFilePath = _this.uploadForm;
            _this.$refs.upload.sucessClick();
        },
        resetForm() {
            let _this = this;
            this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({ visitedViews }) => {
                    this.$router.push({
                        path: "/produce/details",
                        query: { prodId: this.$route.query.prodId },
                    });
                }); // 关闭当前tab回到列表
        },
        submit(data) {
            let _this = this;
            if (this.buttomtype) {
                this.ruleForm.formData = JSON.stringify(data);
                save(this.ruleForm).then((res) => {
                    this.$store
                        .dispatch("tagsView/delView", _this.$route)
                        .then(({ visitedViews }) => {
                            this.$EventBus.$emit("releaseAdd", res);
                            this.verId = res.data.verId;
                            this.startClick();
                        }); // 关闭当前tab回到列表
                });
            } else {
                this.ruleForm.formData = JSON.stringify(data);
                save(this.ruleForm).then((res) => {
                    this.$store
                        .dispatch("tagsView/delView", _this.$route)
                        .then(({ visitedViews }) => {
                            this.$EventBus.$emit("releaseAdd", res);
                            this.$router.push({
                                path: "/produce/details",
                                query: { prodId: this.$route.query.prodId },
                            });
                        }); // 关闭当前tab回到列表
                });
            }
        },
        processList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction("/flowable/processDefinition/list", {
                processDefinitionName: name,
            }).then((res) => {
                const { data } = res;
                // this.process = data.records
                data.records.forEach((item) => {
                    if (item.category == "CP") {
                        this.process.push(item);
                    }
                });
            });
        },
        switchClick(data) {
            if (data == false) {
                this.processName = "";
                this.ruleForm.modelId = "";
            }
        },
        remoteMethodProcess(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.processList(data);
            }, 500);
        },
        processClick(data) {
            console.log(data);
            var _this = this;
            this.processName = data.name;
            this.ruleForm.modelId = data.id;
            this.ruleForm.formKey = data.key;
            this.formData = "";
            if (data.key) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.key,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            } else {
                _this.formData = "";
            }
        },
        manageList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name = "";
            }
            getAction("/flowable/form/list", {
                formName: name,
                current: 1,
                size: 10,
            }).then((res) => {
                const { data } = res;
                this.manage = data.records;
            });
        },
        remoteMethodManage(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.manageList(data);
            }, 500);
        },
        manageClick(data) {
            console.log(data);
            var _this = this;
            this.manageName = data.formName;
            this.ruleForm.formKey = data.formKey;
            this.formData = data.formJson;
            if (data.formKey) {
                getAction("/flowable/form/queryById", {
                    id: data.formKey,
                }).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }
        },
        dirparenIdtchange(data) {
            this.ruleForm.dirId = data;
        },
        selectsuccess(data) {
            this.ruleForm.masterUserId = data[0].userId;
        },
        submitForm() {
            let _this = this;
            if (this.formData) {
                this.$refs.parser.submitForm();
            } else {
                save(this.ruleForm).then((res) => {
                    this.$store
                        .dispatch("tagsView/delView", _this.$route)
                        .then(({ visitedViews }) => {
                            this.$EventBus.$emit("releaseAdd", res);
                            this.$router.push({
                                path: "/produce/details",
                                query: { prodId: this.$route.query.prodId },
                            });
                        }); // 关闭当前tab回到列表
                });
            }
        },
        startClick() {
            var _this = this;
            processStart({
                verId: this.verId,
            }).then(({ msg }) => {
                this.$router.push({
                    path: "/produce/details",
                    query: { prodId: this.$route.query.prodId },
                });
            });
        },
    },
};
</script>
 <style scoped>
.avatar {
    border-radius: 50%;
    width: 30px;
}
.milepostselect {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
}
.milepostselect_div {
    display: flex;
    align-items: center;
}
.milepstdate {
    display: flex;
    width: 100%;
}
</style>
